<template>
    <div>
        <div class="title">
            <div class="ip_address">{{ address }}</div>
            <!-- 搜索框:有搜索图标 -->
            <el-input
                v-model="mapStore.searchContent"
                placeholder="请输入城市名称"
                @keyup.enter="handleSearch"
            >
                <template #prefix>
                    <el-icon>
                        <Search />
                    </el-icon>
                </template>
            </el-input>
            <!-- 下拉框 -->
            <el-select v-model="mapStore.drawType" placeholder="选择绘制图形">
                <el-option value="绘制线" @click="handleDrawType"
                    >绘制线</el-option
                >
                <el-option value="绘制矩形" @click="handleDrawType"
                    >绘制矩形</el-option
                >
                <el-option value="绘制多边形" @click="handleDrawType"
                    >绘制多边形</el-option
                >
                <el-option value="绘制圆形" @click="handleDrawType"
                    >绘制圆形</el-option
                ><el-option value="自由绘制" @click="handleDrawType"
                    >自由绘制</el-option
                >
                <el-option value="退出绘制" @click="handleDrawType"
                    >退出绘制</el-option
                >
            </el-select>
            <el-select v-model="mark" placeholder="选择标记类型">
                <el-option value="充电站" @click="handleMarker"
                    >充电站</el-option
                >
                <el-option value="公交站" @click="handleMarker"
                    >公交站</el-option
                >
                <el-option value="停车点" @click="handleMarker"
                    >停车点</el-option
                >
                <el-option value="退出标记" @click="handleMarker"
                    >退出标记</el-option
                >
            </el-select>
        </div>
    </div>
</template>
<script setup>
import { useMapStore } from "../stores/mapStore";

const mapStore = useMapStore();
</script>
<style scoped>
.title {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100px;
    background-color: #0099ff;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.el-input,
.el-select {
    width: 250px;
}
/* el-select__wrapper el-tooltip__trigger el-tooltip__trigger使用深度选择器修改padding */
::v-deep(.el-select__wrapper) {
    padding: 15px 15px;
}
::v-deep(.el-input__wrapper) {
    padding: 5px 15px;
}
.ip_address {
    color: #fff;
    font-size: 20px;
}
</style>
